<template>
  <a-form
    :model="menuForm"
    layout="vertical"
    label-align="left"
    @finish="submit"
    :disabled="hasPerm('system:menu:edit')"
    class="h-[100%]"
  >
    <FormCard title="新增/编辑菜单" :back="goBack">
      <template #extra>
        <a-button type="primary" :loading="menuTable.loading" htmlType="submit">保存</a-button>
      </template>

      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="菜单名称" name="menuName" required>
            <a-input v-model:value="menuForm.menuName"></a-input>
          </a-form-item>
          <a-form-item label="父级菜单" name="parentId" required>
            <a-tree-select
              v-model:value="menuForm.parentId"
              :field-names="{
                value: 'menuId',
                label: 'menuName',
              }"
              :tree-data="menuTree"
            ></a-tree-select>
          </a-form-item>
          <a-form-item label="菜单状态" name="status" required>
            <a-radio-group v-model:value="menuForm.status" :options="statusOptions"></a-radio-group>
          </a-form-item>

          <a-form-item label="是否显示" name="visible" required>
            <a-radio-group
              v-model:value="menuForm.visible"
              :options="visibleOptions"
            ></a-radio-group>
          </a-form-item>

          <a-form-item label="菜单排序" name="orderNum" required>
            <Sort v-model="menuForm.orderNum" :total="menuTable.query.total"></Sort>
          </a-form-item>

          <a-card title="窗口配置" v-if="menuForm.menuType === MenuTypeEnum.MENU">
            <a-row :gutter="12">
              <a-col :span="12">
                <a-form-item :wrapper-col="{ span: 24 }" label="窗口宽度" name="width">
                  <a-input-number
                    :min="200"
                    class="w-[100%]"
                    :max="1920"
                    v-model:value="menuForm.width"
                    placeholder="请输入窗口宽度"
                  ></a-input-number>
                </a-form-item>
              </a-col>

              <a-col :span="12">
                <a-form-item :wrapper-col="{ span: 24 }" label="窗口高度" name="height">
                  <a-input-number
                    :max="1920"
                    :min="200"
                    placeholder="请输入窗口高度"
                    class="w-[100%]"
                    v-model:value="menuForm.height"
                  ></a-input-number>
                </a-form-item>
              </a-col>
            </a-row>
          </a-card>
        </a-col>

        <a-col :span="12">
          <a-card>
            <a-form-item label="选择菜单类型" required name="menuType" class="mb-0">
              <a-segmented block v-model:value="menuForm.menuType" :options="menuTypeOptions">
                <template #label="{ value: val, payload = {} }">
                  <div class="px-4 py-2">
                    <a-avatar
                      :size="32"
                      shape="square"
                      :src="getImageByFullPath(payload.icon)"
                    ></a-avatar>
                    <div>{{ payload.label }}</div>
                  </div>
                </template>
              </a-segmented>
            </a-form-item>

            <a-card class="mt-12">
              <MenuVue v-if="menuForm.menuType === MenuTypeEnum.MENU"></MenuVue>
              <MenuCategory v-else-if="menuForm.menuType === MenuTypeEnum.CATEGORY" />
              <MenuButton v-else-if="menuForm.menuType === MenuTypeEnum.BUTTON" />
              <MenuLink v-else-if="menuForm.menuType === MenuTypeEnum.LINK" />
              <MenuDynamic v-else-if="menuForm.menuType === MenuTypeEnum.DYNAMIC" />
            </a-card>
          </a-card>
        </a-col>
      </a-row>
    </FormCard>
  </a-form>
</template>

<script setup lang="ts">
import { createMenu, updateMenu } from '@/api/modules/system/menu/menu';
import { MenuTypeEnum } from '@/api/modules/system/menu/types';
import { getImageByFullPath } from '@/api/utils/image';
import { statusOptions, visibleOptions } from '@/global/options/system';
import { hasPerm } from '@/utils/common/perm';
import { response } from '@/utils/table/table';
import Sort from '@/views/components/sort/Sort.vue';
import { menuList } from '../data/curd';
import { menuForm, menuShowForm } from '../data/form';
import { menuTypeOptions } from '../data/options';
import { menuTable, menuTree } from '../data/table';
import MenuVue from './Menu.vue';
import MenuButton from './MenuButton.vue';
import MenuCategory from './MenuCategory.vue';
import MenuDynamic from './MenuDynamic.vue';
import MenuLink from './MenuLink.vue';

const goBack = () => {
  menuShowForm.value = false;
};
const submit = async () => {
  menuTable.value.loading = true;
  /* update */
  if (menuForm.value.menuId) {
    await response(updateMenu, menuForm.value);
  } else {
    await response(createMenu, menuForm.value);
  }
  menuTable.value.loading = false;

  await menuList();
  goBack();
};
</script>

<style lang="scss" scoped>
:deep(.ant-segmented) {
  padding: 12px;
}
:deep(.ant-card-body) {
  overflow-y: auto !important;
  height: 100%;
}
</style>
